import React,{Component} from 'react'
import axios from 'axios'
import {NavLink,Route} from 'react-router-dom'

export default class MIss extends Component{

    constructor(props){
        super(props);

        this.state = {
            list:[]
        }
    }

    componentWillMount(){
        var cid = this.props.match.params.id;
        axios.post('http://localhost:3000/product/list', {
         cateId:cid
        })
        .then((res)=>{
            this.setState({
                list: res.data.docs
            })
        })
    }
    componentWillReceiveProps(nextProps){
 
        var cid = nextProps.match.params.id;
        // console.log(cid)
        axios.post('http://localhost:3000/product/list', {
    //         //  _id:cid
    cateId:cid
        })
        .then((res)=>{
            this.setState({
                list: res.data.docs
            })
        })
    }
    render(){
        const list = this.state.list;
        var lst = [];
        console.log('123',list);

        // console.log(this.props.match.url)
        for(let i=0;i<list.length;i++){
            lst.push(
                <li className="span4" key={i}>
                    <a href="#" className="thumbnail">
                    <img data-src="holder.js/300x200" src={`../../public/img/${list[i].pic}`} alt="" />
                    <h2>{list[i].title}</h2>
                    <p>单价：{list[i].price}元</p>
                    <p>{list[i].desc}元</p>
                    <p>
                         <NavLink to={`/productdetail/${list[i]._id}`} activeClassName="active">
                            <button className="btn  btn-primary">进入详情页</button>
                        </NavLink>
                    </p>
                    </a>
                   
              </li>
            )
        }
        return (
            // <div>
            //     {lst}
            // </div>
        <div className="row">
            <ul className="thumbnails">{lst}</ul>
          </div>
        )
    }
}

